<template>
  <div>
    <div class="form_top">
      <div class="form_left">
        <el-input v-model="searchText"></el-input>
        <el-button type="success" v-power @click="toSearch">查询</el-button>
      </div>
      <el-button type="primary" v-power @click="open">添加</el-button>
    </div>
    <!-- 视频上传的弹出层 -->
    <el-dialog
      @close="closeDialog"
      :title="titleTxt"
      width="40%"
      :visible.sync="videoFlag"
    >
      <el-form>
        <el-form-item label="视频上传">
          <!-- 隐藏的文件上传框 -->
          <input
            type="file"
            @change="toUpload"
            ref="myvideo"
            hidden
            accept="video/*"
          />
          <el-input disabled v-model="cacheName"></el-input
          ><el-button type="primary" @click="chooseVideo">选择视频</el-button>
        </el-form-item>
        <el-form-item label="视频名称">
          <el-input v-model="Vname"></el-input>
        </el-form-item>
        <el-form-item label="视频时长">
          <el-input v-model="Vtime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success" @click="sure">{{ sureBtn }}</el-button>
        <el-button type="danger" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _uploadVideo, _addVideo, _editVideo } from '../../api/video'
export default {
  data () {
    return {
      sureBtn: '确定',
      titleTxt: '添加视频',
      videoFlag: false, //弹出层的显示隐藏
      cacheName: '', //视频上传成功后的返回地址
      Vname: '',
      Vtime: '',
      ID: '', //修改视频的ID
      searchText: '',
      pageStart: 1
    }
  },
  created () {
    // 监听兄弟组件传递当前行数据
    this.$bus.$on('sendrow', (row, pageStart) => {
      console.log(row)
      this.titleTxt = '修改视频'
      this.sureBtn = '确定修改'
      this.videoFlag = true //打开弹出层
      this.Vtime = row.Vtime
      this.Vname = row.Vname
      this.cacheName = row.Vurl
      this.ID = row.ID
      this.pageStart = pageStart
    })
  },
  methods: {
    toSearch () {
      // 搜索 去触发actions里的方法
      this.$store.dispatch('videoStore/videoAction', {
        searchText: this.searchText
      })
      this.searchText = ''
    },
    close () {
      // 关闭弹出层
      this.videoFlag = false
    },
    open () {
      //打开添加视频弹出层
      this.videoFlag = true
    },
    chooseVideo () {
      // 弹出文件选择框
      this.$refs.myvideo.click()
    },
    async toUpload () {
      //上传视频接口
      // 将文件上传框中的视频数据包 放到formData
      let files = this.$refs.myvideo.files[0]
      console.log(files)
      if (files.size / 1024 / 1024 > 500) {
        this.$message.success('视频不能大于500M')
        return
      }
      let formdata = new FormData()
      //  key 随机的时间戳  value 视频数据包
      formdata.append(new Date().getTime(), files)

      var res = await _uploadVideo(formdata)
      console.log(res)
      if (res.success) {
        this.$message.success('视频上传成功')
        this.cacheName = res.cacheName
      }
    },
    closeDialog () {
      //弹出层的关闭事件
      this.Vname = ''
      this.Vtime = ''
      this.cacheName = ''
      this.ID = ''
      this.titleTxt = '添加视频'
      this.sureBtn = '确定'
    },
    async sure () {
      //添加或修改视频
      if (this.ID) {
        // 修改视频接口
        var editRes = await _editVideo({
          ID: this.ID,
          Vname: this.Vname,
          Vtime: this.Vtime,
          Vurl: this.cacheName
        })
      } else {
        //添加视频接口
        var res = await _addVideo({
          Vname: this.Vname,
          Vtime: this.Vtime,
          Vurl: this.cacheName
        })
      }
      console.log(res)
      this.$message.success('操作成功')
      this.videoFlag = false //关闭弹出层
      //添加后重新获取视频列表
      this.$store.dispatch('videoStore/videoAction', {
        pageStart: this.pageStart
      })
    }
  }
}
</script>
<style lang="less" socped>
.form_top {
  display: flex;
  width: 80%;
  margin: 50px auto;
  justify-content: space-between;
  .form_left {
    width: 40%;
    display: flex;
  }
}
</style>
